<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top,
        .two {
            display: flex;
            justify-content: center;
        }

        .table2 td {
            border: solid 1px rgb(58, 122, 179);
            border-top: solid 0px rgb(58, 122, 179);
        }

        #bitian {
            text-align: center;
            width: 810px;
        }

        td {
            font-size: 13px;
            padding-top: 3px;
            padding-bottom: 3px;
        }

        .left {
            width: 150px;
            text-align: right;

        }

        .table2 .left {
            border-right: solid 0px rgb(58, 122, 179);
        }

        .right {
            width: 807px;
            text-align: left;
        }

        #idtype {
            width: 170px;
            height: 24px;
            padding: 2px;
        }

        .xinxi {
            width: 807px;
            display: flex;
            justify-content: space-around;
        }

        .But {
            width: 700px;
            padding-top: 20px;
            display: flex;
            justify-content: center;
        }

        .but {
            background-color: rgb(35, 200, 241);
            width: 130px;
            height: 40px;
            border: 0;
            border-radius: 10px;
            color: aliceblue;
        }

        .zhuyi {
            color: red;
            font-size: small;
        }

        #lookpas {
            width: 170px;
            height: 24px;
            padding: 2px;
        }

        .two {
            width: 938px;
            padding: 10px;
            border: solid 1px rgb(58, 122, 179);
            border-top: solid 0px rgb(58, 122, 179);
        }

        .but2 {
            background-color: rgb(253, 122, 6);
            color: aliceblue;
            border: 0;
            width: 50px;
            height: 25px;
            border-radius: 5px;
        }

        span {
            color: brown;
        }

        ins {
            font-size: 11px;
            color: red;
        }
        .newspan{
            color: rgb(17, 103, 24);
        }
    </style>
</head>

<body>
    <div class="top"><img src="表头.jpg" alt=""></div>
    <form action="" method="get">
        <div class="top">
            <table align="center" border="0" cellspacing="0" cellpadding="0">
                <tr style="color: aliceblue; background-color: rgb(58, 122, 179);">
                    <td class="left" id="zhuce">注册信息</td>
                    <td class="right" id="bitian">填写信息(*必须填写)</td>
                </tr>
            </table>
        </div class="top">
        <table class="table2" align="center" cellspacing="0" cellpadding="0">
            <tr>
                <td class="left">用 户 名 :&nbsp;</td>
                <td class="right"> &nbsp;<input type="text" name="username" id="username" maxlength="20" minlength="5">
                    <span id="erUserName">*请填写5至20位数字、字母或下划线作为用户名，请不要输入汉字或其它符号</span>
                </td>
            </tr>
            <tr>
                <td class="left">密&emsp;&emsp;码 :&nbsp;</td>
                <td class="right"> &nbsp;<input type="password" name="password" id="password1" maxlength="15"
                        minlength="8">
                    <span id="erPassword1">*大写字母+小写字母+数字的8至15位字符组合</span>
                </td>
            </tr>
            <tr>
                <td class="left">确认密码 :&nbsp;</td>
                <td class="right"> &nbsp;<input type="password" name="password" id="password2">
                    <span id="erPassword2">*</span>
                </td>
            </tr>
            <tr>
                <td class="left">考生姓名 :&nbsp;</td>
                <td class="right"> &nbsp;<input type="text" name="name" id="name">
                    <span id="erName">*姓名中间请不要输入空格，注册后不能修改！
                        <!-- <span class="pi">如姓名中含有生僻字或"·"，参见姓名中如何输入生僻字</span> -->
                        <ins>如姓名中含有生僻字或"·"，参见姓名中如何输入生僻字</ins>
                    </span>
                </td>
            </tr>
            <tr>
                <td class="left">证件类型 :&nbsp;</td>
                <td class="right">&nbsp;<select name="idtype" id="idtype">
                        <option value="">居民身份证</option>
                        <option value="">安阳</option>
                        <option value="">信阳</option>
                        <option value="">开封</option>
                    </select>
                    <span id="erIdtype">*注册后不得自行修改</span>
                </td>
            </tr>
            <tr>
                <td class="left">证件号码 :&nbsp;</td>
                <td class="right"> &nbsp;<input type="text" name="idnum" id="idnum">
                    <span id="erIdnum">*注册后不得自行修改</span>
                </td>
            </tr>
            <tr>
                <td class="left">学历 :&nbsp;</td>
                <td class="right" id="xueli">
                    <div class="But">
                        <button class="but">添加学历信息</button>
                    </div>
                    <div class="xinxi">
                        <p>*证书编号</p>
                        <p>*毕业院校</p>
                        <p>*毕业时间</p>
                        <p>*所学专业</p>
                        <p>*学历层次</p>
                        <p>*培养方式</p>
                        <p>操作</p>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="left">学位 :&nbsp;</td>
                <td class="right" id="xuewei">
                    <div class="But">
                        <button class="but">添加学位信息</button>
                    </div>
                    <div class="xinxi">
                        <p>*证书编号</p>
                        <p>*学校名称</p>
                        <p>*取得时间</p>
                        <p>*专业</p>
                        <p>*学位层次</p>
                        <p>操作</p>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="left">学历学位注意事项 :&nbsp;</td>
                <td class="right">
                    <div class="zhuyi">
                        <p>&emsp;1.系统对2002年至今大专以上（含大专）</p>
                        <p>&emsp;2.学历至少填一条</p>
                        <p>&emsp;3.学位最多5条</p>
                        <p>&emsp;4.保存后无法删除</p>
                        <p>&emsp;5.“未核验”，24小时后查看</p>
                        <p>&emsp;6.不影响报名</p>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="left">密码找回问题 :&nbsp;</td>
                <td class="right">&nbsp;<select name="lookpas" id="lookpas">
                        <option value="">--请选择--</option>
                        <option value="">安阳</option>
                        <option value="">信阳</option>
                        <option value="">开封</option>
                    </select>
                    <span id="erLookpas">*请选择密码找回问题</span>
                </td>
            </tr>
            <tr>
                <td class="left">答案 :&nbsp;</td>
                <td class="right"> &nbsp;<input type="text" name="daan" id="daan">
                    <span id="erDaan">*请牢记问题答案,密码忘记时需用到</span>
                </td>
            </tr>
            <tr>
                <td class="left">邮箱 :&nbsp;</td>
                <td class="right"> &nbsp;<input type="text" name="daan" id="daan">
                    <span id="erDaan">*本人现用邮箱</span>
                </td>
            </tr>
            <tr>
                <td class="left">手机号 :&nbsp;</td>
                <td class="right"> &nbsp;<input type="text" name="daan" id="daan">
                    <span id="erDaan">*注册后自动绑定</span>
                </td>
            </tr>
            <tr>
                <td class="left">短信验证码 :&nbsp;</td>
                <td class="right"> &nbsp;<input type="text" name="daan" id="daan">
                    <button class="but">获取短信验证码</button>
                </td>
            </tr>
        </table>

        <div class="top">
            <div class="two">
                <input class="but2" type="submit" value="提交">&nbsp;&nbsp;&nbsp;
                <input class="but2" type="submit" value="返回">
            </div>
        </div>
        </div>
    </form>
</body>
<script>
    // 获取所有的表格元素
    var rows = document.getElementsByTagName("tr");
    // 遍历每一行
    for (var i = 1; i < rows.length; i++) {
        // 判断当前行是否为奇数行或者偶数行
        if ((i + 1) % 2 != 0) {
            // 如果是奇数行则添加特定的样式
            rows[i].style.backgroundColor = "#c0dee5";
        }
    }

    var username=document.getElementById('username');
    //昵称规则
    username.onblur = function (e) {
        //6-16位,不能纯数字,不能除下划线以外的符号
        var v = nickname.value.trim();
        if (v.length == 0) {
            spa[0].innerHTML = '昵称不能为空';
            
        } else if (v.length < 5) {
            spa[0].innerHTML = '昵称应为5-20位';
        } else {
            //精确匹配/^....$/
            //\w:数字,字母,下划线
            //{6,16}表示重复出现6-16次
            if (/^w{6,16}$/.test(v)) {
                spa[0].innerHTML = '昵称正确';
            } else {
                spa[0].innerHTML = '*请填写5至20位数字、字母或下划线作为用户名，请不要输入汉字或其它符号';
                spa[0].className='newspan';
            }
        }
    }


</script>

</html>